<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {
            var $li = $('#accordion li');
            $li.click(function () {
                //alert($(this).html());
                $(this).animate({
                    'left': 21 * $(this).index(),
                })
                $(this).prevAll().each(function () {
                    $(this).animate({
                        'left': 21 * $(this).index(),
                    });
                });
                $(this).nextAll().each(function () {
                    $(this).animate({
                        "left": (727 - 21 * (5- $(this).index())),
                    })
                });



            });

        });
    </script>
    <style type="text/css">
        * {
            margin: 0;
            border: 0;
        }

        #accordion {
            width: 727px;
            height: 350px;
            margin: 100px auto 0;
            position: relative;
            overflow: hidden;
            border: 1px solid #cccccc;
        }

        #accordion ul {
            list-style: none;
        }

        #accordion ul li {
            width: 643px;
            height: 350px;
            position: absolute;
            background: #fff;

        }

        #accordion ul li span {
            display: block;
            width: 20px;
            height: 350px;
            float: left;
            text-align: center;
            color: #fff;
            padding-top: 5px;
            cursor: pointer;
            /* background-color: pink; */
        }

        #accordion ul li img {
            display: block;
            float: right;
        }

        .bar01 {
            left: 0px;
        }

        .bar02 {
            left: 643px;
        }

        .bar03 {
            left: 664px;
        }

        .bar04 {
            left: 685px;
        }

        .bar05 {
            left: 706px;
        }

        .bar01 span {
            background: #09E0B5;
        }

        .bar02 span {
            background: #3D7FBB;
        }

        .bar03 span {
            background: #5CA716;
        }

        .bar04 span {
            background: #F28B24;
        }

        .bar05 span {
            background: #7C0070;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div id="accordion">
        <ul>
            <li class="bar01"><span>非洲景色01</span><img src="images/001.jpg" alt=""></li>
            <li class="bar02"><span>非洲景色02</span><img src="images/002.jpg" alt=""></li>
            <li class="bar03"><span>非洲景色03</span><img src="images/003.jpg" alt=""></li>
            <li class="bar04"><span>非洲景色04</span><img src="images/004.jpg" alt=""></li>
            <li class="bar05"><span>非洲景色05</span><img src="images/005.jpg" alt=""></li>
        </ul>
    </div>
</body>

</html>